<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Local Scene</title>
<style>
html, body {
  padding: 0;
  margin: 0;
}
#homeDiv{
  left: 10px;
  top: 120px;
  z-index: 35;
  position: absolute;
}
</style>
 
<link rel="stylesheet" href="https://js.arcgis.com/4.0beta2/esri/css/main.css">
<script src="https://js.arcgis.com/4.0beta2/"></script>
 
<script>
  require([
    "esri/WebScene",
    "esri/views/SceneView",
    "esri/layers/FeatureLayer",
    "esri/geometry/Extent",
    "esri/PopupTemplate",
    "esri/geometry/SpatialReference",
    "esri/renderers/SimpleRenderer",
    "esri/symbols/ObjectSymbol3DLayer",
    "esri/symbols/IconSymbol3DLayer",
    "esri/symbols/PointSymbol3D",
    "esri/tasks/QueryTask",
    "esri/tasks/support/Query",
    "esri/widgets/Home",
    "dojo/domReady!"
  ], function (WebScene, SceneView, FeatureLayer, Extent, 
  PopupTemplate, SpatialReference, SimpleRenderer, ObjectSymbol3DLayer, 
  IconSymbol3DLayer, PointSymbol3D, QueryTask, Query, Home
  ){
      
    var wellsUrl = "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/HarperSumnerOGWells/FeatureServer/0";  
    var quakesUrl = "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/ks_earthquakes_since_2000/FeatureServer/0";   

    //The clipping extent for the scene  
    var kansasExtent = new Extent({
      xmax: -10834217.219947055,
      xmin: -10932882.111830618,
      ymax: 4493918.031861138,
      ymin: 4432667.349743819,
      spatialReference: new SpatialReference({
        wkid: 3857   
      })
    });
      
    /********************************************************
    * The popupTemplate that will populate the content of the 
    * popup when a well feature is selected
    *******************************************************/     

    var wellsTemplate = new PopupTemplate({
      title: "WELL",
      content: "<b>API No.:</b> {API_NUMBER}<br>" +
        "<b>Lease (0-10): </b> {LEASE}<br>" +
        "<b>Operator: </b> {CURR_OPERATOR} km<br>" +
        "<b>Drilled: </b> {SPUD}<br>" +
        "<b>Completed: </b> {COMPLETION}<br>" + 
        "<b>Status: </b> {STATUS2}<br>" +
        "<b>Depth: </b> {DEPTH} meters<br>",
      fieldInfos: [{
        fieldName: "SPUD",
        format: {
          dateFormat: "shortDate"
        }
      }, {
        fieldName: "COMPLETION",
        format: {
          dateFormat: "shortDate"
        }
      }, {
        fieldName: "DEPTH",
        format: {
          places: 0,
          digitSeparator: true
        }
      }]
    });  
      
    /*********************************************************
    * Renderer properties for symbolizing wells on the surface
    *********************************************************/ 
      
    var wellsSurfaceRenderer = new SimpleRenderer({
      symbol: new PointSymbol3D({
        symbolLayers: [new IconSymbol3DLayer({
          material: { color: "#785226" },
          resource: { primitive: "x" },
          size: 4
        })]
      })
    }); 
      
    /**************************************************
    * Renderer for symbolizing wells below the surface
    **************************************************/  
      
    var wellsDepthRenderer = new SimpleRenderer({
      symbol: new PointSymbol3D({
        symbolLayers: [new ObjectSymbol3DLayer({
          resource: { primitive: "cylinder" }
        })]
      }),
      visualVariables: [{
        type: "sizeInfo",
        field: "DEPTH",
        axis: "height",
        minDataValue: 1,
        maxDataValue: 10000,
        minSize: -0.3048,
        maxSize: -3048
      }, {
        type: "sizeInfo",
        minSize: 50,
        axis: "width"
      }, {
         type: "colorInfo",
         field: "SPUD",
         theme: "high-to-low",
         stops: [{ value: 1374735600000, color: "white"},  //from mid-2013
                 { value: 1447056100000, color: "red"}]    //to Nov 2015
      }]
    });  
        
    /**************************************************
    * Layers depicting oil and gas wells in Harper County
    * and Sumner County, Kansas
    **************************************************/   
      
    //Layer for depicting wells below the surface  
    var wellsLyr = new FeatureLayer({
      url: wellsUrl,
      definitionExpression: "Status = 'CBM' OR Status = 'EOR' OR Status = 'GAS' OR Status = 'INJ' OR Status = 'O&G' OR Status = 'OIL' OR Status = 'SWD'",
      outFields: ["*"],
      popupTemplate: wellsTemplate,
      renderer: wellsDepthRenderer,
      //This keeps the cylinders from poking above the ground     
      elevationInfo: {
        mode: "relativeToGround",
        offset: -100
      }
    });
      
    //Layer for depicting well locations on the surface  
    var wellsSurfaceLyr = new FeatureLayer({
      url: wellsUrl,
      definitionExpression: "Status = 'CBM' OR Status = 'EDR' OR Status = 'GAS' OR Status = 'INJ' OR Status = 'O&G' OR Status = 'OIL' OR Status = 'SWD'",
      outFields: ["*"],
      popupTemplate: wellsTemplate,
      renderer: wellsSurfaceRenderer,
      elevationInfo: {
        mode: "onTheGround"
      }
    });
      
    /********************************************************
    * Renderer for symbolizing earthquakes below the surface
    * 
    * Earthquakes will be symbolized as spheres. The size of 
    * each will coincide with the magnitude of the earthquake, 
    * while the color will indicate the date at which the 
    * earthquake occured. The more white the color, the older the
    * earthquake. The deeper the red, the more recent the 
    * earthquake occurred.
    *******************************************************/  
  
    var quakesRenderer = new SimpleRenderer({
      symbol: new PointSymbol3D({
        symbolLayers:[new ObjectSymbol3DLayer({
          resource:{
            primitive: "sphere"
          }
        })]
      }),
      visualVariables: [{
         type: "colorInfo",
         field: "date_evt",
         theme: "high-to-low",
         stops: [{ value: 1374735600000, color: "white"}, //from mid-2013
                 { value: 1447056100000, color: "red"}]   //to Nov. 2015
      }, {
         type: "sizeInfo",
         field: "mag",
         axis: "all",
         valueUnit: "meters",
         minDataValue: 1,
         maxDataValue: 5,
         minSize: 100,
         maxSize: 2000
      }]
    });
      
    /********************************************************
    * Renderer for symbolizing earthquakes on the surface
    *******************************************************/    
      
    //Quakes will be symbolized as circles
    var surfaceSym = new PointSymbol3D({
      symbolLayers: [
        new IconSymbol3DLayer({
          material: { color: [179,75,75] },
          resource: { primitive: "circle" }
      })]    
    }); 
      
    //Symbol size will vary depending on magnitude of the quake 
    var quakesSurfaceRenderer = new SimpleRenderer({
      symbol: surfaceSym,
      visualVariables: [{
        type: "sizeInfo",
        field: "mag",
        axis: "all",
        valueUnit: "unknown",
        minDataValue: 1,
        maxDataValue: 5,
        minSize: 3,
        maxSize: 50
      }] 
    });
      
    /********************************************************
    * The popupTemplate that will populate the content of the 
    * popup when an earthquake feature is selected
    *******************************************************/     

    var quakeTemplate = new PopupTemplate({
      title: "{place}",
      content: "<b>Date and time:</b> {date_evt}<br>" +
        "<b>Magnitude (0-10): </b> {mag}<br>" +
        "<b>Depth: </b> {depth} km<br>",
      fieldInfos: [{
        fieldName: "date_evt",
        format: {
          dateFormat: "shortDateShortTime"
        }
      }],
      actions: [{
        id: "find-wells",
        title: "Nearby wells"
      }]
    });  
      
    /********************************************************
    * Create earthquakes layers (one on the surface and one
    * below the surface to show actual location).
    *******************************************************/
      
    //Defines a layer for drawing the exact location of quakes below the surface  
    var quakesDepthLyr = new FeatureLayer({
      url: quakesUrl,
      //Show only quakes of magnitude 2.0 or higher    
      definitionExpression: "mag >= 2",
      outFields: ["*"],    
      renderer: quakesRenderer,
      popupTemplate: quakeTemplate,
      returnZ: true,
      elevationInfo: {
        mode: "relativeToGround"
      }
    });
      
    //Defines a layer for depicting quakes on the surface  
    var quakesSurfaceLyr = new FeatureLayer({
      url: quakesUrl,
      definitionExpression: "mag >= 2",
      outFields: ["*"],
      renderer: quakesSurfaceRenderer,
      popupTemplate: quakeTemplate,
      opacity: 0.6,
      elevationInfo: {
        mode: "onTheGround"
      }
    });   
     
    /********************************************************************
    * Create a local scene in south central Kansas
    * 
    * To create a local scene, you must set the viewingMode to "local".
    * To define a small, localized area for the view, set 
    * the clippingEnabled and clippingArea properties. 
    ********************************************************************/
      
    var scene = new WebScene({
      basemap: "topo",
      //indicates to create a local scene    
      viewingMode: "local",
      //Use the exent defined in clippingArea to define the bounds of the scene    
      clippingEnabled: true,
      clippingArea: kansasExtent,
      layers: [wellsLyr, wellsSurfaceLyr, quakesDepthLyr, quakesSurfaceLyr]
    });
 
    /********************************************************************
    * Assign the scene to a SceneView. Disabling the collision property of 
    * the constraints will allow the user to navigate the view's camera
    * below the surface.
    ********************************************************************/
    var view = new SceneView({
      container: "viewDiv",
      map: scene,
      extent: kansasExtent,
      //Allows for navigating the camera below the surface    
      constraints: {
        collision: {
          enabled: false
        },
        tilt: {
          max: 179.99
        }
      },
      //Turns off atmosphere and stars settings    
      environment: {
        atmosphere: "none",
        stars: "none"
      }
    }); 
      
    /********************************************************
     * Set up action for returning the number of wells within
     * 10km of the earthquake.
    *******************************************************/
      
    var wellsQTask = new QueryTask({
      url: wellsUrl
    });
      
    //Default parameters for selecting wells within 10km of click  
    var wellsBufferParams = new Query({
       spatialRelationship: "esriSpatialRelIntersects",
       distance: 10,
       units: "kilometers",
       where: "Status = 'CBM' OR Status = 'EDR' OR Status = 'GAS' OR Status = 'INJ' OR Status = 'O&G' OR Status = 'OIL' OR Status = 'SWD'"
    });  
      
    view.popup.on("action-click", function(evt){
      if(evt.action.id === "find-wells"){
        wellsBufferParams.geometry = view.popup.selectedFeature.geometry;
        wellsQTask.executeForCount(wellsBufferParams).then(function(response){
          var results = "<b>" + response + "</b> active wells exist within 10 kilometers of this earthquake.";    
          view.popup.set("content", results);
        }, function(err){
          console.log("action failed: ", err);
        });
      } else {
        return;
      }    
    });
      
    //Set up a home button for resetting the viewpoint to the intial extent  
    var homeBtn = new Home({
      view: view    
    }, "homeDiv");
    homeBtn.startup();
  });
</script>
</head>
 
<body>
  <div id="viewDiv"></div>
  <div id="homeDiv"></div>    
</body>
</html> 